<template>
  <div class="w-100 h-100 flex-vertical justify-content-center py-5 px-3">
    <div @click="$router.push('/detail')" class="common-box round-md flex-item p-3 align-items-center">
      <div class="flex-label flex-center-center">
        <img class="avatar" src="@img/my/avatar.png" alt="" />
      </div>
      <div class="flex-content flex-vertical ml-3">
        <div class="text-main">小咖啡</div>
        <div class="d-flex align-items-center my-2">
          <div>英短</div>
          <div>2个月</div>
          <div>8KG</div>
        </div>
        <div class="day px-4">我们一起生活的第52天</div>
      </div>
      <div class="flex-label">
        <svg t="1683725406726" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7914" width="1.2rem" height="1.2rem">
          <path
            d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
            fill="#000000"
            p-id="7915"
          ></path>
        </svg>
      </div>
    </div>
    <div class="d-flex justify-content-between text-center my-4 text-main">
      <div class="common-box round-md w-40 py-4-5">
        <div>宠物订单</div>
      </div>
      <div class="common-box round-md w-40 py-4-5">
        <div>我的分享</div>
      </div>
    </div>
    <div class="common-box round-md py-3 text-main">
      <div class="flex-center-center mb-3">
        <div class="mr-3">收货地址</div>
        <img class="icon-img" src="@img/my/icon1.png" alt="" />
      </div>
      <div class="flex-center-center mb-3">
        <div class="mr-3">我的预约</div>
        <img class="icon-img" src="@img/my/icon2.png" alt="" />
      </div>
      <div class="flex-center-center mb-3">
        <div class="mr-3">历史记录</div>
        <img class="icon-img" src="@img/my/icon3.png" alt="" />
      </div>
      <div class="flex-center-center">
        <div class="mr-3">我的收藏</div>
        <img class="icon-img" src="@img/my/icon4.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
@import '~@style/variable.less';

.common-box {
  background-color: rgba(231, 187, 158, 0.6);
}

.avatar {
  width: 4.5rem;
}
.day {
  height: 1.4rem;
  line-height: 1.4rem;
  border-radius: 2rem;
  background-color: #bc9a9a;
  font-size: 0.875rem;
}

.icon-img {
  width: 2rem;
}
</style>
